<template>
	<view class="toast__server flex-y" @touchmove.prevent>
		<view @tap="$emit('event')" class="shading item12-7">
			
		</view>
		<view :style="{
			height: height + 'vh' ,
			top:    100 - height + 'vh'
		}" class="toast item12-5">
			<slot></slot>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			height: {
				type: String ,
				default: '45'
			}
		}
	}
</script>

<style>
	.toast__server {
		position: fixed;
		top: 0;
		left: 0;
		z-index: 999;
	}
	
	.shading {
		height: 100vh;
		width: 100vw;
		background-color: rgba(0 ,0 ,0 ,0.5);
	}
	
	.toast {
		position: fixed;
		top: 55vh;
		width: 100vw;
		height: 45vh;
		border-top-left-radius: 10rpx;
		border-top-right-radius: 10rpx;
		background-color: rgb(255 ,255 ,255);
	}
</style>
